<template>
	<view class="content">
		<esunNavbar :headerName="headerName"></esunNavbar>
		<view class="container" style="font-size: 15px;">
			<view v-show="step ===0" style="padding:12px 12px;">
				<u-cell-group customStyle="background:#fff;">

					<u-cell title="选择领料单" @click="showPickingList">
						<view slot="value" style="display: flex;">
							<text>{{pickingResultDesc}}</text>
							<u-icon name="arrow-right" color="#2979ff" size="12"></u-icon>
							<u-picker ref="uPicker" :show="isShowPicking" :columns="pickingList"
								@confirm="confirmSelect" @cancel="isShowPicking = false"></u-picker>
						</view>
					</u-cell>
					<!-- <u-cell title="选择出库口" @click="showOutboundList">
						<view slot="value" style="display: flex;">
							<text>{{outboundResultDesc}}</text>
							<u-icon name="arrow-right" color="#2979ff" size="12"></u-icon>
							<u-picker ref="uPicker" :show="isShowOutbound" :columns="outboundList"
								@confirm="confirmOutboundSelect" @cancel="isShowOutbound = false"></u-picker>
						</view>
					</u-cell> -->
					<u-cell title="选择出库口">
						<view slot="value">
							<view class="selected-outbounds">
								<view v-for="(item, index) in selectedOutbounds" :key="index" class="outbound-tag">
									{{ item }}
									<text @click.stop="removeOutbound(index)" class="remove-tag">×</text>
								</view>
							</view>
							<u-button @click="showOutboundList" size="mini" type="primary">选择</u-button>
						</view>
					</u-cell>
				</u-cell-group>
			</view>


			<!-- 主要内容区域 -->
			<scroll-view class="content" scroll-y>
				<!-- 物料列表 -->
				<view class="picking-list">
					<view class="picking-item" v-for="(item, index) in pickingMaterialList" :key="index">
						<view class="picking-header" @click="item.isExpanded = !item.isExpanded">
							<view class="picking-info">
								<text class="material-code">{{item.materialCode}}</text>
								<text class="material-name">{{item.materialName}}</text>
								<text class="quantity">数量：{{item.quantity}}</text>
							</view>
							<u-icon :name="item.isExpanded ? 'arrow-down' : 'arrow-right'" size="20"></u-icon>
						</view>
						<view class="pallet-list" v-show="item.isExpanded">
							<view class="pallet-item" v-for="(pallet, pIndex) in item.pallets" :key="pIndex">
								<checkbox :checked="pallet.selected" @click="pallet.selected = !pallet.selected">
								</checkbox>
								<view class="pallet-info">
									<text class="pallet-code">托盘码：{{pallet.palletCode}}</text>
									<text class="batch">批次：{{pallet.batch}}</text>
									<text class="quantity">数量：{{pallet.quantity}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<u-popup :show="isShowOutbound" @close="isShowOutbound = false">
    <view class="outbound-popup">
        <view class="outbound-list">
            <checkbox-group @change="outboundChange">
                <label v-for="(item, index) in outboundList[0]" :key="index" class="outbound-item">
                    <checkbox :value="item" :checked="selectedOutbounds.includes(item)" />
                    <text>{{item}}</text>
                </label>
            </checkbox-group>
        </view>
        <view class="popup-buttons">
            <u-button @click="confirmOutboundSelect" type="primary">确定</u-button>
            <u-button @click="isShowOutbound = false">取消</u-button>
        </view>
    </view>
</u-popup>

		<esunTabbar @confirm="confirm" @cancel="cancel" @refresh="refresh"></esunTabbar>
		<esunMask :showMask="showMask"></esunMask>
	</view>
</template>
<script>
	import esunNavbar from 'components/esun-navbar/esun-navbar.vue' 
	import esunTabbar from 'components/esun-tabbar/esun-tabbar.vue' 
	import esunMask from 'components/esun-mask/esun-mask.vue' 
	import store from '@/store'
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import moment from 'moment'
	/*#ifdef H5*/
	const mui = require('static/mui.min.js')
	/*#endif*/
	export default {
		components: {
			esunNavbar,
			esunTabbar,
			esunMask
		},
		data() {
			return {
				language: '',
				userid:'',
				domain: '',
				sessionid: '',
				headerName:'',
				showMask:false,
				pickingResult: '',
				pickingResultDesc: '',
				isShowPicking: false,
				pickingList: [
					[
						'order202501001',
						'order202501002',
						'order202501003',
						'order202501004',
						'order202501005',
						'order202501006',
						'order202501007',
						'order202501008',
					]
				],
				selectedOutbounds: [], // 存储已选择的出库口
				pickingMaterialList: [], // 领料单物料列表
        pickingMaterialListTmp: [
            {
				order: 'order202501001',
                materialCode: 'M001002003',
                materialName: '螺丝钉 M8x20mm',
                quantity: 100,
                pallets: [
                    {
                        palletCode: 'P001',
                        batch: 'LOT20231201',
                        quantity: 50,
                        selected: false
                    },
                    {
                        palletCode: 'P002',
                        batch: 'LOT20231202',
                        quantity: 50,
                        selected: false
                    }
                ],
                isExpanded: false
            },
            {
				order: 'order202501001',
                materialCode: 'M001002004',
                materialName: '螺母 M8',
                quantity: 200,
                pallets: [
                    {
                        palletCode: 'P003',
                        batch: 'LOT20231201',
                        quantity: 100,
                        selected: true
                    },
                    {
                        palletCode: 'P004',
                        batch: 'LOT20231202',
                        quantity: 100,
                        selected: false
                    }
                ],
                isExpanded: false
            },
            {
				order: 'order202501002',
                materialCode: 'M001002005',
                materialName: '螺母 M8',
                quantity: 200,
                pallets: [
                    {
                        palletCode: 'P003',
                        batch: 'LOT20231201',
                        quantity: 100,
                        selected: true
                    },
                    {
                        palletCode: 'P004',
                        batch: 'LOT20231202',
                        quantity: 100,
                        selected: false
                    }
                ],
                isExpanded: false
            }
        ],
				outboundResult: '',
				outboundResultDesc: '',
				isShowOutbound: false,
				outboundList: [
					[
						'O-001',
						'O-002',	
					]	
				],
				outboundDataList: [],
				outboundDataListTmp: [
					{
						outbound: 'outbound202501001',
						boxCode: 'S202312001001',
						materialCode: 'M001002003',	
					}		
				],
				explainList: [],
				remark:'',
				step: 0,
				uniqueCode: '',
				locCode: '',
				uniqueCodeFocus: false,
				locCodeFocus: false,
				uniqueCodeDisabled: false,
				picList: [{
					type: 5,
					label: '故障现象照片',
					pic:[]
				},{
					type: 6,
					label: '故障原因照片',
					pic:[]
				}],
				pointType: 5,
				cameraFlag: false
			}
		},
		onLoad: function(option) {
			var _this = this;
			console.log('option', option);
			// _this.$store.getters.getAll.WCS = 'http://10.124.0.109:5066'
			// _this.$store.getters.getAll.WCS = 'http://10.125.0.38:5052'
			// _this.domain = 'acc'
			// _this.userid = 'appTest'
			_this.headerName = JSON.parse(option.data).headerName
			var usermsg = JSON.parse(uni.getStorageSync('usermsg'))
			_this.userid = usermsg.userid
			_this.domain = usermsg.domain
			_this.sessionid = usermsg.sessionid
			_this.language = usermsg.language
		},
		mounted:function(){
			var _this = this
			_this.uniqueCodeFocus = true
		},
		watch: {
		   
		},
		methods: {
			hideKeyboard(){
				var _this = this
				/*#ifdef H5*/
				console.log('h5端')
				return
				/*#endif*/
				_this.$nextTick(function() {
					 uni.hideKeyboard()
					// _this.hide()
				})
			},
			hide(){
				var _this = this
			    // 只是解决软键盘的闪现
			    var interval = setInterval(function(){
			        uni.hideKeyboard();//隐藏软键盘
			    },10);
			        setTimeout(() => {
						clearInterval(interval);
			    },500); 
			},
			showPickingList(){
				var _this = this
				_this.isShowPicking = true
			},
			confirmSelect(value){
				var _this = this
				console.log(value)
				_this.pickingResult = value.value[0]
				_this.pickingResultDesc = value.value[0]
				
					// 从materialListTmp中查找匹配的数据
					_this.pickingMaterialList = _this.pickingMaterialListTmp.filter(item => {
						return item.order.toLowerCase() === _this.pickingResult.trim().toLowerCase()
					})
				_this.isShowPicking = false
			},

			outboundChange(e) {
				this.selectedOutbounds = e.detail.value;
			},

			removeOutbound(index) {
				this.selectedOutbounds.splice(index, 1);
			},

			confirmOutboundSelect() {
				if (this.selectedOutbounds.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请至少选择一个出库口'
					});
					return;
				}
				this.outboundResult = this.selectedOutbounds.join(',');
				this.outboundResultDesc = this.selectedOutbounds.join(',');
				this.isShowOutbound = false;
			},

			// 修改 confirm 方法中的验证
			confirm() {
				var _this = this
				if (_this.pickingResult == '') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请选择领料单'
					});
					_this.appUtil.beep()
					return;
				}
				if (_this.selectedOutbounds.length === 0) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请选择出库口'
					});
					_this.appUtil.beep()
					return;
				}
				// ... 其他代码
			},
			showOutboundList() {
				var _this = this
				_this.isShowOutbound = true
			},
			// confirmOutboundSelect(value){
			// 	var _this = this
			// 	console.log(value)
			// 	_this.outboundResult = value.value[0]
			// 	_this.outboundResultDesc = value.value[0]

			// 	_this.isShowOutbound = false	
			// },
			// confirm() {
			// 	var _this = this
			// 	if (_this.pickingResult == '') {
			// 		uni.showToast({
			// 			icon: 'none',
			// 			position: 'bottom',
			// 			title: '请选择领料单'
			// 		});
			// 		_this.appUtil.beep()
			// 		return;
			// 	}
			// 	if (_this.outboundResult == '') {
			// 		uni.showToast({
			// 			icon: 'none',
			// 			position: 'bottom',
			// 			title: '请选择出库口'
			// 		});	
			// 		_this.appUtil.beep()
			// 		return;
			// 	}
			// 	if (_this.pickingMaterialList.length === 0) {
			// 		uni.showToast({
			// 			icon: 'none',
			// 			position: 'bottom',
			// 			title: '未找到相关托盘信息'
			// 		});
			// 		_this.appUtil.beep()
			// 		return
			// 	}

			// 	uni.showToast({
			// 		title: '出库下发成功',
			// 		icon: ' success',
			// 		duration: 2000
			// 	})
			// 	_this.refresh()
			// },
			cancel() {
				var _this = this
				_this.fieldList = []
				_this.uniqueCodeDisabled = false
				_this.uniqueCode = ''
				_this.locCode = ''
				_this.pickingResult = ''
				_this.pickingResultDesc = ''
				_this.outboundResult = ''
				_this.outboundResultDesc = ''
				_this.pickingMaterialList = []
				setTimeout(function () {
					_this.$nextTick(function () {
						_this.uniqueCode = ''
						_this.uniqueCodeFocus = true
					})
				}, 100);
			},
			refresh(){
				var _this = this
				_this.picList = [{
					type: 5,
					label: '故障现象照片',
					pic:[]
				},{
					type: 6,
					label: '故障原因照片',
					pic:[]
				}]
				_this.fieldList = []
				_this.explainList = []
				_this.remark = ''
				_this.step = 0
				_this.uniqueCodeDisabled = false
				_this.uniqueCode = ''
				_this.materialList = []
				_this.locCode = ''
				_this.uniqueCodeFocus = true
				_this.locCodeFocus = false
				_this.pickingResult = ''
				_this.pickingResultDesc = ''
				_this.outboundResult = ''
				_this.outboundResultDesc = ''
				_this.pickingMaterialList = []
				setTimeout(function() {
					_this.$nextTick(function() {
						_this.uniqueCode = ''
						_this.uniqueCodeFocus = true
					})
				}, 100);
			}
		}
	}
</script>

<style scoped>
	>>>.u-border{
		border: 0px;
	}
	.huanhang{
		white-space: normal;
		word-wrap:break-word;
		border: 1px solid #ddd;
		display:flex;
		justify-content:center !important;
	}
	>>>.u-input{
		padding: 0 !important;
	}
	
.material-list {
  margin: 20rpx;
}

.picking-item {
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.picking-header {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f8f8;
}

.picking-info {
  flex: 1;
}

.material-code {
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
}

.material-name {
  font-size: 28rpx;
  color: #666;
}

.pallet-list {
  padding: 0 20rpx;
}

.pallet-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.pallet-info {
  flex: 1;
  margin-left: 20rpx;
}

.pallet-code, .batch, .quantity {
  font-size: 26rpx;
  color: #666;
  margin-right: 20rpx;
}

// ... 其他样式
.picking-list {
    margin: 20rpx;
}

.picking-item {
    background: #fff;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    overflow: hidden;
}

.picking-header {
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f8f8;
}

.picking-info {
    flex: 1;
}

.material-code {
    font-size: 28rpx;
    color: #333;
    margin-right: 20rpx;
}

.material-name {
    font-size: 28rpx;
    color: #666;
}

.pallet-list {
    padding: 0 20rpx;
}

.pallet-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1px solid #eee;
}

.pallet-info {
    flex: 1;
    margin-left: 20rpx;
}

.pallet-code, .batch, .quantity {
    font-size: 26rpx;
    color: #666;
    margin-right: 20rpx;
}


.selected-outbounds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.outbound-tag {
    background: #e1f3ff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.remove-tag {
    margin-left: 4px;
    color: #999;
    cursor: pointer;
}

.outbound-popup {
    background: #fff;
    padding: 16px;
    width: 80vw;
}

.outbound-list {
    max-height: 60vh;
    overflow-y: auto;
}

.outbound-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    gap: 8px;
}

.popup-buttons {
    margin-top: 16px;
    display: flex;
    gap: 16px;
}


</style>
